<template>
  <div class="settings">
    <div class="settings-tabs">
      <div 
        v-for="tab in tabs" 
        :key="tab.key"
        class="tab-item"
        :class="{ active: activeTab === tab.key }"
        @click="activeTab = tab.key"
      >
        {{ tab.title }}
      </div>
    </div>

    <!-- 用户管理 -->
    <div v-if="activeTab === 'users'" class="tab-content">
      <div class="section-header">
        <h4>用户管理</h4>
        <button class="primary-btn" @click="addUser">新增用户</button>
      </div>
      
      <table class="data-table">
        <thead>
          <tr>
            <th>用户名</th>
            <th>姓名</th>
            <th>角色</th>
            <th>部门</th>
            <th>状态</th>
            <th>最后登录</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="user in users" :key="user.id">
            <td>{{ user.username }}</td>
            <td>{{ user.fullName }}</td>
            <td>{{ user.role }}</td>
            <td>{{ user.department }}</td>
            <td>
              <span class="status-badge" :class="user.status">
                {{ user.statusText }}
              </span>
            </td>
            <td>{{ user.lastLogin }}</td>
            <td>
              <button class="action-btn" @click="editUser(user.id)">编辑</button>
              <button class="action-btn danger" @click="deleteUser(user.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 系统配置 -->
    <div v-if="activeTab === 'system'" class="tab-content">
      <h4>系统参数配置</h4>
      
      <div class="config-section">
        <h5>基本设置</h5>
        <div class="config-item">
          <label>系统名称:</label>
          <input v-model="systemConfig.systemName" type="text">
        </div>
        <div class="config-item">
          <label>药店名称:</label>
          <input v-model="systemConfig.pharmacyName" type="text">
        </div>
        <div class="config-item">
          <label>联系电话:</label>
          <input v-model="systemConfig.phone" type="text">
        </div>
        <div class="config-item">
          <label>地址:</label>
          <input v-model="systemConfig.address" type="text">
        </div>
      </div>

      <div class="config-section">
        <h5>库存设置</h5>
        <div class="config-item">
          <label>默认安全库存:</label>
          <input v-model="systemConfig.defaultSafeStock" type="number">
        </div>
        <div class="config-item">
          <label>过期预警天数:</label>
          <input v-model="systemConfig.expiryWarningDays" type="number">
        </div>
        <div class="config-item">
          <label>自动采购:</label>
          <input v-model="systemConfig.autoPurchase" type="checkbox">
        </div>
      </div>

      <div class="config-section">
        <h5>系统安全</h5>
        <div class="config-item">
          <label>密码最短长度:</label>
          <input v-model="systemConfig.minPasswordLength" type="number">
        </div>
        <div class="config-item">
          <label>登录超时(分钟):</label>
          <input v-model="systemConfig.sessionTimeout" type="number">
        </div>
        <div class="config-item">
          <label>启用操作日志:</label>
          <input v-model="systemConfig.enableAuditLog" type="checkbox">
        </div>
      </div>

      <div class="config-actions">
        <button class="primary-btn" @click="saveConfig">保存配置</button>
        <button class="secondary-btn" @click="resetConfig">重置默认</button>
      </div>
    </div>

    <!-- 备份恢复 -->
    <div v-if="activeTab === 'backup'" class="tab-content">
      <div class="backup-section">
        <h4>数据备份</h4>
        <div class="backup-options">
          <div class="option-item">
            <label>备份类型:</label>
            <select v-model="backupType">
              <option value="full">完整备份</option>
              <option value="incremental">增量备份</option>
              <option value="differential">差异备份</option>
            </select>
          </div>
          <div class="option-item">
            <label>自动备份:</label>
            <select v-model="autoBackupFrequency">
              <option value="none">关闭</option>
              <option value="daily">每日</option>
              <option value="weekly">每周</option>
              <option value="monthly">每月</option>
            </select>
          </div>
        </div>
        
        <div class="backup-actions">
          <button class="primary-btn" @click="startBackup">立即备份</button>
          <button class="secondary-btn" @click="downloadBackup">下载备份</button>
        </div>
      </div>

      <div class="backup-history">
        <h4>备份历史</h4>
        <table class="data-table">
          <thead>
            <tr>
              <th>备份时间</th>
              <th>类型</th>
              <th>文件大小</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="backup in backupHistory" :key="backup.id">
              <td>{{ backup.createTime }}</td>
              <td>{{ backup.type }}</td>
              <td>{{ backup.fileSize }}</td>
              <td>{{ backup.status }}</td>
              <td>
                <button class="action-btn" @click="restoreBackup(backup.id)">恢复</button>
                <button class="action-btn danger" @click="deleteBackup(backup.id)">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const activeTab = ref('users')

const tabs = [
  { key: 'users', title: '用户管理' },
  { key: 'system', title: '系统配置' },
  { key: 'backup', title: '备份恢复' }
]

// 用户数据
const users = ref([
  {
    id: '1',
    username: 'admin',
    fullName: '系统管理员',
    role: '管理员',
    department: '系统部',
    status: 'active',
    statusText: '正常',
    lastLogin: '2024-01-15 14:30'
  },
  {
    id: '2',
    username: 'zhangyi',
    fullName: '张医生',
    role: '药师',
    department: '药房',
    status: 'active',
    statusText: '正常',
    lastLogin: '2024-01-15 13:45'
  },
  {
    id: '3',
    username: 'lihushi',
    fullName: '李护士',
    role: '营业员',
    department: '药房',
    status: 'inactive',
    statusText: '停用',
    lastLogin: '2024-01-10 09:20'
  }
])

// 系统配置
const systemConfig = ref({
  systemName: '医药管理系统',
  pharmacyName: '康复药店',
  phone: '400-123-4567',
  address: '北京市朝阳区某某街道123号',
  defaultSafeStock: 30,
  expiryWarningDays: 30,
  autoPurchase: false,
  minPasswordLength: 6,
  sessionTimeout: 30,
  enableAuditLog: true
})

// 备份相关
const backupType = ref('full')
const autoBackupFrequency = ref('daily')

const backupHistory = ref([
  {
    id: '1',
    createTime: '2024-01-15 02:00',
    type: '完整备份',
    fileSize: '245MB',
    status: '成功'
  },
  {
    id: '2',
    createTime: '2024-01-14 02:00',
    type: '完整备份',
    fileSize: '243MB',
    status: '成功'
  }
])

// 方法
const addUser = () => alert('添加用户')
const editUser = (userId: string) => alert(`编辑用户: ${userId}`)
const deleteUser = (userId: string) => {
  if (confirm('确定要删除这个用户吗？')) {
    alert(`删除用户: ${userId}`)
  }
}

const saveConfig = () => alert('保存系统配置')
const resetConfig = () => {
  if (confirm('确定要重置为默认配置吗？')) {
    alert('重置配置')
  }
}

const startBackup = () => alert('开始备份')
const downloadBackup = () => alert('下载备份文件')
const restoreBackup = (backupId: string) => {
  if (confirm('确定要恢复这个备份吗？此操作不可逆！')) {
    alert(`恢复备份: ${backupId}`)
  }
}
const deleteBackup = (backupId: string) => {
  if (confirm('确定要删除这个备份文件吗？')) {
    alert(`删除备份: ${backupId}`)
  }
}
</script>

<style scoped>
.settings {
  font-size: 12px;
}

.settings-tabs {
  background: white;
  border: 1px solid #ddd;
  border-bottom: none;
  display: flex;
  margin-bottom: 0;
}

.tab-item {
  padding: 10px 20px;
  cursor: pointer;
  border-right: 1px solid #ddd;
  background: #f8f9fa;
  transition: background 0.2s;
}

.tab-item:hover {
  background: #e8f4f8;
}

.tab-item.active {
  background: white;
  border-bottom: 1px solid white;
  margin-bottom: -1px;
  position: relative;
  z-index: 1;
}

.tab-content {
  background: white;
  border: 1px solid #ddd;
  padding: 15px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-header h4 {
  margin: 0;
  color: #333;
}

.primary-btn, .secondary-btn {
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  border: none;
}

.primary-btn {
  background: #3498db;
  color: white;
}

.primary-btn:hover {
  background: #2980b9;
}

.secondary-btn {
  background: white;
  border: 1px solid #bdc3c7;
  color: #333;
}

.secondary-btn:hover {
  background: #e8f4f8;
  border-color: #3498db;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ddd;
  font-size: 12px;
}

.data-table th {
  background: #f8f9fa;
  border: 1px solid #ddd;
  padding: 6px 8px;
  text-align: left;
  font-weight: bold;
  font-size: 11px;
  color: #666;
}

.data-table td {
  border: 1px solid #ddd;
  padding: 4px 8px;
  vertical-align: top;
}

.data-table tr:nth-child(even) {
  background: #f9f9f9;
}

.data-table tr:hover {
  background: #e8f4f8;
}

.status-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 2px;
  font-weight: bold;
  color: white;
}

.status-badge.active {
  background: #27ae60;
}

.status-badge.inactive {
  background: #e74c3c;
}

.action-btn {
  background: none;
  border: none;
  color: #3498db;
  cursor: pointer;
  text-decoration: underline;
  font-size: 11px;
  padding: 2px 4px;
  margin-right: 5px;
}

.action-btn:hover {
  color: #2980b9;
}

.action-btn.danger {
  color: #e74c3c;
}

.config-section {
  margin-bottom: 20px;
  border: 1px solid #e0e0e0;
  padding: 15px;
  background: #fafafa;
}

.config-section h5 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 13px;
}

.config-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.config-item label {
  width: 120px;
  font-weight: bold;
  color: #333;
}

.config-item input, .config-item select {
  flex: 1;
  border: 1px solid #ddd;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
}

.config-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.backup-section, .backup-history {
  margin-bottom: 20px;
}

.backup-options {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.option-item label {
  font-weight: bold;
  color: #333;
}

.backup-actions {
  display: flex;
  gap: 10px;
}
</style> 